import React from 'react';
import {Modal, Form, Space, Button} from 'antd';
import ProForm, {ProFormTextArea, ProFormText, ProFormSelect} from '@ant-design/pro-form';
import { useForm } from 'antd/es/form/Form';
import {getCategoryList} from "@/services/category";
import {CheckOutlined, UndoOutlined} from "@ant-design/icons";
export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<API.RuleListItem>;
export type UpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  updateModalVisible: boolean;
  values: Partial<API.RuleListItem>;
  addType: boolean;
};

const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  const [form] = useForm();
  const formLayout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 14,
    },
  };

  const onReset = () => {
    form.setFieldsValue({
      groupName: '',
      groupDesc: '',
    });
  };

  return (
    <Modal
      title={!props.addType ? '编辑' : '新建' + '资讯中心分类'}
      width="600px"
      destroyOnClose
      open={props.updateModalVisible}
      onCancel={props.onCancel}
      footer={null}
    >
      <ProForm
        form={form}
        layout="horizontal"
        {...formLayout}
        initialValues={props.values}
        onFinish={(e)=>{
          props.onSubmit(e)
        }}
        onReset={onReset}
        submitter={{
          render: (_, dom) => (
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              <Space>
                {/*{dom}*/}
                {<Button onClick={() => {
                  _.reset()
                }}><UndoOutlined />重置</Button>}
                {<Button type={"primary"} onClick={() => {
                  _.submit()
                }}><CheckOutlined />提交</Button>}

              </Space>
            </div>
          ),
        }}
      >
        <ProFormText
          rules={[
            {
              required: true,
              message: '类别名称必填！',
            },
          ]}
          width="md"
          name="name"
          placeholder="请输入类别名称"
          label="类别名称"
        />
        {
          !props.addType ?
            <ProFormSelect
              rules={[
                {
                  required: true,
                  message: '请选择所属栏目',
                },
              ]}
              width="md"
              label="所属栏目"
              // width="60%"
              name="parentId"
              initialValue={props.values.parentId || 0}
              placeholder="请选择"
              request={async () => {
                // 这里需要返回一个 Promise,在返回之前你可以进行数据转化
                // 如果需要转化参数可以在这里进行修改
                const msg = await getCategoryList({type: 'topic'})
                let res = [{label:'一级栏目',value:0}];
                msg.data.map((item) => {
                  console.log(props.values.id,'props');
                  if(item.id != props.values.id){
                    let temp = {};
                    temp['label'] = item.name;
                    temp['value'] = item.id;
                    res.push(temp);
                  }

                });
                return res;
              }}
          /> : null
        }

        <ProFormTextArea
          width="md"
          name="description"
          placeholder="请输入类别说明"
          label="类别说明"
        />
      </ProForm>
    </Modal>
  );
};

export default UpdateForm;
